<template>
  <div class="shchoolpart">
      <div v-for="item,i in data" :key="i" class="onepart">
            <div class="redbar"></div>
            <div class="content">
                <div class="title">{{item.name}}</div>
                <div class="detail">
                    <div v-for="part,i in item.parts" :key="i">
                        {{part}}
                        </div>
                </div>
            </div>
      </div>
  </div>
</template>
<script>
export default {
    props:['data'],
};

</script>
<style scoped>
.shchoolpart{
  width: 86%;
  margin: 2em auto;
  display: grid;    
  grid-template-columns: 1fr 1fr; 
  grid-gap: 4em;  
}
.detail{
    display: grid;    
    grid-template-columns: 1fr 1fr; 
}
.title{
    font-size: 1.6em;
    margin-bottom: 1em;
}
.redbar{
    height: 30px;
    background: #94070a;
    opacity: .8;
}
.content{
    padding: 1em;
}
.onepart{
    box-shadow: 2px 2px 8px #eee;
    cursor: pointer;
}

.onepart:hover{
    box-shadow: 2px 2px 8px rgb(214, 214, 214);
    transform: scale(1.1);
}
</style>